<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-area">
				<u-upload  :header='header' :before-remove="beforeRemove" ref="uUpload"
					@on-success="onSuccess" :custom-btn="false" :show-upload-list="true" :auto-upload="true"
					:action="action" :show-progress="true" :deletable="true" :max-count="3">
					<view v-if="lists" slot="addBtn" class="slot-btn" hover-class="slot-btn__hover"
						hover-stay-time="150">
					</view>
				</u-upload>
				<!-- <u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'uploadFile',
		data() {
			return {
				//avatar: '',
				action: 'https://api.php800.cn/weilai/api/common/filesUpload.php',	
				fileList: [],
				lists: [], // 组件内部的文件列表
				header: {
					'phone': uni.getStorageSync('phone'),
					'token': uni.getStorageSync('token')
				}
			}
		},
		created() {
			
		},
		methods: {
			
			reUpload() {
				this.$refs.uUpload.reUpload();
			},
			autoUploadChange(index) {
				this.autoUpload = index == 0 ? true : false;
			},
			beforeRemove() {
				//this.$publicMsg.setUserPhoto(formData).then
				return true
			},
			upload() {
				this.$refs.uUpload.upload();
			},
			deleteItem(index) {
				this.$refs.uUpload.remove(index);
			},
			onSuccess(data, index, lists) {
				this.$u.vuex('vuex_imgUrl',data.data.url)//建议选择下面的方式，这个方式懒得改了
				this.$emit('ping',data.data.url)
				
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
		

		}
	}
</script>

<style lang="scss">
	.u-demo-wrap {
		background-color: #FFFFFF;
		padding: 40rpx 8rpx;
		margin-left: -14rpx;
		margin-right: -14rpx;
	}

	.u-add-wrap {
		flex-direction: column;
		color: $u-content-color;
		font-size: 28rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pre-item {
		flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 140rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.u-progress {
		position: absolute;
		bottom: 10rpx;
		left: 8rpx;
		right: 8rpx;
		z-index: 9;
		width: auto;
	}

	.pre-item-image {
		width: 100%;
		height: 140rpx;
	}

	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		background-color: $u-type-error;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
